<template>
  <div>
    <detail-header :isTop="isTop"></detail-header>
    <div style="height:.71rem"></div>
    <detail-swiper :swiperImg="swiperImg"></detail-swiper>
    <detail-desc :proData="proData"></detail-desc>
    <detail-goods :proData="proData" :isTop="isTop"></detail-goods>
    <div class="menude">
      <div class="item1" @click="handleStartClick">
        <div class="shangpin-footer-item1-row1" >
            <img v-show="!isCollect" src="../../assets/img/detail-start.png">
            <img v-show="isCollect" src="../../assets/img/collect.png">
        </div>
        <div class="shangpin-footer-item1-row2">
          <span v-show="!isCollect">收藏</span>
          <span v-show="isCollect" style="color:#ff8430">已收藏</span>
        </div>
      </div>
      <router-link tag="div" to="/cart" class="item1">
        <div class="shangpin-footer-item1-row3">
            <img src="../../assets/img/detail-cart.png">
            <span id="badge-span" v-show="isCartNum">{{isCartNum}}</span>
        </div>
        <div class="shangpin-footer-item1-row2 pt1">
            <span>购物车</span>
        </div>
      </router-link>
      <div class="item2">
        <div class="item2-panel" @click="handleCartClick(1)">
          <button type="button" class="skin-b1 item2-panel-button">加入购物车</button>
        </div>
        <div class="item2-panel" @click="handleCartClick(2)">
          <button type="button" class="skin-b2 item2-panel-button">立即购买</button>
        </div>
      </div>
    </div>
    <detail-dialog :swiperImg="swiperImg" :goods="goods" :isDialog="isDialog" :dialogShowName='isDialog' @handleCart="handleCart" @chenge="showDialog"  @handleMall="handleMall" ></detail-dialog>
    <public-top></public-top>
    <div style="height:1.15rem"></div>
  </div>
</template>

<script>
import axios from 'axios'
import wx from 'weixin-js-sdk'
import { Toast } from 'mint-ui'
import DetailHeader from './components/DetailHeader'
import DetailSwiper from './components/Swiper'
import DetailDesc from './components/Desc'
import DetailGoods from './components/Goods'
import DetailDialog from './components/Dialog'
import PublicTop from '../public/Top'
import Fade from 'common/fade/Fade'

export default {
  name: 'Detail',
  show: true,
  components: {
    DetailHeader,
    DetailSwiper,
    DetailDesc,
    DetailGoods,
    DetailDialog,
    Fade,
    PublicTop
  },
  data () {
    return {
      isTop: true,
      isDialog: 0,
      isCollect: false,
      isCartNum: '',
      proData: {},
      swiperImg: [],
      goods: {
        name: '',
        price: ''
      }
    }
  },
  methods: {
    getInfo () {
      if (this.$store.state.userId) {
        let code = JSON.parse(this.$store.state.token)
        this.$router.push({path: '/detail/' + this.$route.params.pid, query: {shareId: code.personalCode}})
      }
      axios.get('/meimai/interface/goods/getDetail', {
        params: {
          'goodsId': this.$route.params.pid,
          'memberId': this.$store.state.userId
        }
      }).then((res) => {
        res = res.data
        console.log(res.data)
        if (res.code === 0 && res.data) {
          this.isCollect = res.data.isCollect
          this.goodsId = res.data.goodsId
          this.proData = res.data
          this.swiperImg = res.data.imgs
          this.goods.name = res.data.name
          this.goods.price = res.data.price
        }
      })
    },
    handleStartClick () {
      this.isCollect = !this.isCollect
      // console.log(this.$route.params.pid)
      axios.get('/meimai/interface/goods/collectGoods', {
        params: {
          memberId: this.$store.state.userId,
          goodsId: this.$route.params.pid,
          isCollect: this.isCollect
        }
      }).then((res) => {
        let datas = res.data
        if (datas.code === 0) {
          if (this.isCollect === true) {
            this.$toast('添加收藏')
          } else {
            this.$toast('取消收藏')
          }
        }
      })
    },
    handleCartClick (data) {
      this.isDialog = data
    },
    showDialog (data) {
      this.isDialog = data
    },
    handleScroll () {
      const top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      if (top > 620) {
        this.isTop = false
      } else {
        this.isTop = true
      }
    },
    handleCart (res) {
      if (!this.$store.state.userId) {
        alert('请登录！！')
        this.$router.push('/login')
        return false
      }
      if (res && this.$route.params.pid) {
        axios.get('/meimai/interface/cart/add', {
          params: { 'memberId': this.$store.state.userId, 'goodsId': this.$route.params.pid, 'quantity': res }
        }).then(() => {
          this.$router.push('/cart')
        })
      } else {
        this.isDialog = 0
        Toast('加入购物车错误')
      }
    },
    handleMall (res) {
      if (!this.$store.state.userId) {
        alert('请登录！！')
        this.$router.push('/login')
        return false
      }
      axios.get('/meimai/interface/cart/add', {
        params: { 'memberId': this.$store.state.userId, 'goodsId': this.$route.params.pid, 'quantity': res }
      }).then(() => {
        let tcartItemDOs = '?memberId=' + this.$store.state.userId + '&tCartItemDOs[0].id=' + this.$route.params.pid + '&tCartItemDOs[0].quantity=' + res
        sessionStorage.setItem('tcartItemDOs', tcartItemDOs)
        this.$router.push('/order')
        // this.$router.push('/cart')
      })
    }
  },
  updated () {
    axios.get('/meimai/interface/wx/getTicketInfo?url=' + encodeURIComponent(window.location.href.split('#')[0])).then((res) => {
      // alert(window.location.href.split('#')[0])
      wx.config({
        debug: false,
        appId: res.data.appid,
        timestamp: res.data.timestamp,
        nonceStr: res.data.noncestr,
        signature: res.data.signature,
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
      })
    })
    var that = this
    wx.ready(function () {
      let wximg = 'http://bjmeimai.aefyc.com/static/img/logo.png'
      if (that.proData.imgs.length > 0) {
        wximg = that.proData.imgs[0]
      }
      let summary = '美麦商城商品'
      if (that.proData.summary) {
        summary = that.proData.summary
      }
      // 分享给朋友
      wx.onMenuShareAppMessage({
        title: that.goods.name, // 分享标题
        desc: summary, // 分享描述
        link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: wximg, // 分享图标
        success: function (res) {
          // 用户确认分享后执行的回调函数
          alert('分享成功')
        },
        cancel: function (res) {
          // 用户取消分享后执行的回调函数
          alert(JSON.stringify(res))
        }
      })
      // 分享到朋友圈
      // wx.onMenuShareTimeline({
      //   title: this.proData.name, // 分享标题
      //   link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl: wximg, // 分享图标
      //   success: function (res) {
      //     // 用户确认分享后执行的回调函数
      //     alert('分享成功!')
      //   },
      //   cancel: function (res) {
      //     // 用户取消分享后执行的回调函数
      //     alert(JSON.stringify(res))
      //   }
      // })
    })
  },
  mounted () {
    this.getInfo()
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
  .menude
    position: fixed
    bottom: 0
    background: white
    width: 100%
    border: .02rem #E2E2E2 solid
    height: 1.15rem
    z-index: 99
    .item1
      width: .8rem
      height: 1.15rem
      float: left
      margin-left: .1rem
      .shangpin-footer-item1-row1
        width: 100%
        padding: .16rem 0 0 .14rem
        img
          width: .52rem
      .shangpin-footer-item1-row2
        width: 100%
        text-align: center
        color: grey
        font-size: .24rem
        line-height: .36rem
      .pt1
        padding-top: .06rem
      .shangpin-footer-item1-row3
        width: 100%
        position: relative
        padding: .16rem 0 0 .04rem
        img
          width: .52rem
        #badge-span
          position: absolute
          top: 5px
          right: 0
          font-size: .2rem
          color: white
          border-radius: 2rem
          width: .36rem
          height: .36rem
          white-space: nowrap
          text-align: center
          line-height: .36rem
          background-color: #E4393C
    .item2
      height: 1.15rem
      top: 0
      left: 0
      padding-left: 95px
      .item2-panel
        width: 50%;
        float: left;
        text-align: center
        margin-top: .2rem
        .item2-panel-button
          font-size: .28rem
          height: .8rem
          width: 90%
          color: #fff
        .skin-b1
          background: #ec2935 !important
          border-color: #ec2935 !important
        .skin-b2
          background: #fbb839 !important
          border-color: #fbb839 !important
</style>
